<template>
<div class="news-list">
  <div class="header">
    {{ category?.name }}
  </div>

  <div class="main-content">
    <ul>
      <li v-for="news in newsList">
        <nuxt-link style="color: #666; text-decoration: none;" :to="`/home/news-${news?.id}`">
          {{ news?.title }}
        </nuxt-link>
      </li>
    </ul>
  </div>

</div>
</template>

<script setup lang="ts">
import { useApi } from "~/composeables";

const props = defineProps<{
  count : number,
}>();

const route = useRoute();

const api = useApi();
const pageIndex = ref(1);
const pageSize = ref(props.count);
const totalCount = ref(0);
const newsList = ref<any>([]);
const category = ref<any>();

const newsListReps = await api.informationApi.getNewsByCateKey(pageIndex.value, pageSize.value, route.params.categoryKey);
newsList.value = newsListReps?.data?.pageData;
pageIndex.value = newsListReps?.data?.pageIndex;
totalCount.value = newsListReps?.data?.totalCount;

const categoryReps = await api.informationApi.getCategoryInfoByCateKey(route.params.categoryKey);
category.value = categoryReps?.data;

</script>